const { v4: uuidv4 } = require('uuid')
export default {
  props: {
    sourceChartOption: {
      type: [Object, String],
      default: () => {
        return {}
      }
    }
  },
  watch: {
    sourceChartOption: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          if (val.chartType && this.chartEnum[val.chartType]) {
            this.buildOption(val)
          }
        }
      }
    }
  },
  data() {
    return {
      chartEnum: {
        chartFunnel: 'chartFunnel',
        chartLine: 'chartLine',
        chartPie: 'chartPie',
        chartBar: 'chartBar',
        chartBarMixedLine: 'chartBarMixedLine'
      },
      baseProps: {
        xAxis: false,
        yAxis: false,
        series: false,
        refID: false,
        text: '',
        subText: '',
        seriesColorFn: false,
        bottom: false
      }
    }
  },
  computed: {
    compute() {
    }
  },
  created() {
    if (this.sourceChartOption.chartType && this.chartEnum[this.sourceChartOption.chartType]) {
      this.buildOption(JSON.parse(JSON.stringify(this.sourceChartOption)))
    }
  },
  methods: {
    buildOption(sourceChartOption) {
      let { chartType } = sourceChartOption
      console.log('sourceChartOption',sourceChartOption)
      if (sourceChartOption.chartType === this.chartEnum.chartBar) {
      }
      let baseProps = Object.assign(this.baseProps, sourceChartOption)
      baseProps.refID = baseProps.refID || baseProps.classId || uuidv4()
      baseProps.xAxis = baseProps.xAxis || baseProps.xaxis
      baseProps.bottom = sourceChartOption.bottom || 30
      baseProps.rotate = sourceChartOption.rotate || 50
      switch (chartType) {
        case this.chartEnum.chartBar:
          baseProps.yAxis = baseProps.yAxis || [
            {
              type: 'value',
              name: '',
              min: 0,
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                show: false
              }
            }
          ]
          break
        case this.chartEnum.chartPie:
          baseProps.legend = {
            show: false
          }
          break
      }
      baseProps.yAxis = baseProps.yAxis || [
        {
          type: 'value',
          name: '',
          min: 0,
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: false
          }
        },
        {
          type: 'value',
          name: '',
          min: 0,
          max: 10,
          interval: 1,
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: false
          }
        }
      ]
      // baseProps.seriesColorFn = params => {
      //   var colorList = ['#83E4FC', '#0B4A59', '#0F387B']
      //   if (params.seriesIndex === 0) {
      //     return {
      //       type: 'linear',
      //       x: 0,
      //       y: 0,
      //       x2: 0,
      //       y2: 1,
      //       colorStops: [
      //         {
      //           offset: 0,
      //           color: '#85E4FC' // 0% 处的颜色
      //         },
      //         {
      //           offset: 0.5,
      //           color: '#49C5E4' // 0% 处的颜色
      //         },
      //         {
      //           offset: 0.8,
      //           color: '#26B2D5'
      //         },
      //         {
      //           offset: 1,
      //           color: '#1DACCF' // 100% 处的颜色
      //         }
      //       ],
      //       global: false // 缺省为 false
      //     }
      //   }
      //   return colorList[params.seriesIndex]
      // }
      // baseProps.seriesColorFn = false
      console.log('baseProps',baseProps)

      if (Array.isArray(baseProps.series)) {
        for (let serie of baseProps.series) {
          for (let key in serie) {
            if (serie[key] === null) {
              delete serie[key]
            }
          }
        }
      }

      if (sourceChartOption.chartType === this.chartEnum.chartBar) {
      }
      this.chartOption = baseProps
    }
  }
}
